第7章层叠规则

`z-index`

z-index属性只有和定位元素在一起时才会起作用，可以是正数或负数。

层叠上下文和层叠水平

理解元素的层叠顺序（从上至下）

（装饰）正z-index，位置在最下面，特指层叠上下文元素的边框和背景色
z-index:auto或看成z-index:0，层叠水平一样
（内容）inline水平盒子，指的是包括inline/inline-block/inline-table元素的层叠顺序，都是同等级别
（布局）float浮动盒子
（布局）block块状水平盒子
负z-index
层叠上下文background/border

牢记层叠准则

层叠领域的黄金准则。当元素发生层叠时，其覆盖关系遵循下面两条准则：

谁大谁上：层叠水平值大的在上面；
后来居上：当元素的层叠水平一致、层叠顺序相同时，处于后面的元素会覆盖前面的元素。

深入了解层叠上下文

特性

层叠上下文元素有如下特性：

层叠水平要比普通元素高
可以阻断元素的混合模式
可以嵌套，内部层叠上下文及其子元素均受制于外部的“层叠上下文”
每个层叠上下文和兄弟元素独立，当进行层叠变化或渲染时，只需要考虑后代元素
当发生层叠时，整个元素被认为是在父层叠上下文的层叠顺序中

创建

1. 根层叠上下文

根层叠上下文指的是页面根元素html。

2. 定位元素和传统层叠上下文

对于position值为relative/absolute以及Firefox/IE浏览器下含有position:fixed声明的定位元素，当其z-index值不是auto时，会创建层叠上下文。

当z-index:auto时，遵循黄金准则的第一条谁大谁上；当z-index为具体数值时，按照父级的大小进行层叠排列；当z-index为具体数值，且父级层叠水平/顺序一致，遵循后来居上。

3. CSS3层叠上下文

元素为flex布局元素（父元素display:flex|inline-flex），同时z-index值不是auto。
元素的opacity值不是1。
元素的transform值不是none。
元素的filter值不是none。

层叠上下文与层叠顺序

如果层叠上下文不依赖z-index数值，则其层叠顺序是z-index:auto，可以看成z-index:0级别；
如果层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定。

元素成为定位元素，其z-index就会自动生效，此时其z-index默认是auto，也就是0级别，根据层叠顺序表，就会覆盖inline/block/float元素。不支持z-index的层叠上下文元素天然是z-index:auto级别，层叠上下文元素和定位元素是一个层叠顺序，当发生层叠时遵循后来居上准则。

`z-index`负值深入理解

z-index负值具体作用：

可访问性隐藏。z-index负值可以隐藏元素，只需要层叠上下文内的某一个父元素加背景色即可。优势如下：
- 它与clip隐藏相比，元素无须绝对定位，设置position:relative也可以隐藏；
- 它对原来的布局以及元素的行为没有任何影响，而clip隐藏会导致控件focus的焦点发生细微的变化。

IE8下的多背景模拟。

 .box {
 background-image: url("1.jpg");
 position: relative;
 z-index: 0;
 }

 .box:before,
 .box:after {
 content: '';
 position: absolute;
 z-index: -1;
 }

 .box:before {
 background-image: url("2.jpg");
 }

 .box:after {
 background-image: url("3.jpg");
 }

定位在元素的后面。

`z-index`准则

对于非浮层元素，避免设置z-index值，z-index值不需要超过2。

.box {
background-image: url("1.jpg");
position: relative;
z-index: 0;
}

.box:before,
.box:after {
content: '';
position: absolute;
z-index: -1;
}

.box:before {
background-image: url("2.jpg");
}

.box:after {
background-image: url("3.jpg");
}

第7章 层叠规则

z-index